<template>
    <div class="app-container every">
        <span class="title">每月阅读榜</span>
        <div class="content">
            <div class="item" v-for="(item,index) in list" :key="index">
                <span class="item-cover" :style="{backgroundImage:'url('+item.imgurl+')'}">
                    <span class="cover-label">{{index+1}}</span>
                </span>
                <div class="item-center">
                    <span class="name" v-html="item.bookName"></span>
                    <span class="author" v-html="item.author||''"></span>
                    <span class="desc">{{item.describ}}</span>
                </div>
                <div class="item-right btn">
                    <!-- <el-button type="primary" v-if="item.whetherBookShel == '1'" round>移除书架{{item.whetherBookShel}}</el-button>
                    <el-button type="primary" v-else round>加入书架{{item.whetherBookShel}}</el-button><br> -->
                    <el-button type="primary" @click="goToInfo(item.fileid,item.bookName)" round>书籍详情</el-button>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {monthRankings,addbooks,deleteBookShelf,isCollect} from '@/api/index'
export default {
  data() {
    return {
      currentPage: 1,
      list:[],
      total:0
    };
  },
  components: {},
  watch:{
   $route() {
      this.currentPage = Number(this.$route.query.currentPage) || 1;
      this.init(this.currentPage);
    }
  },
  created () {
    this.init();
  },
  methods: {
    //移除书架
    deleteBooks() {
      deleteBookShelf(this.collect.bookShelfId).then(res => {
        console.log(res.data);
        this.isCollect();
      });
    },
    //添加到书架
    addBooks() {
      let book = this.bookDetails;
      addbooks(book.bookIntroduction,book.cover,book.bookName,book.author,book.bookId
      ).then(res => {
        console.log(res.data);
        this.isCollect();
      });
    },
    goToInfo(bookId,bookName) {
        this.$router.push("/book/info?bookId="+bookId+"&bookName="+bookName);
      },
    init(page,pageSize){
      this.list = [];
      monthRankings(page,pageSize).then(res=>{
        this.total = res.data.date.total
        var list = res.data.date.list
        console.log(list)
        list.map((val,index)=>{
        isCollect(val.fileid).then(res => {
            val.whetherBookShel = res.data.date.whetherBookShel
            // this.list.push(val)
         });
        })
         this.list = list
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
     this.currentPage = val;
      this.$router.push(this.$route.path + "?currentPage=" + this.currentPage);
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .every .content .item .item-right .el-button:first-child{
    border: 2px solid #e93926;
    color: #e93926
  }
}
.custom-zxx{
  .every .content .item .item-right .el-button:first-child{
    border: 2px solid #15c798;
    color: #15c798
  }
  
}
.every {
  padding: 0px 30px 20px 30px;
  min-height: 800px;
  height: 100%;
  .title {
    display: block;
    font-size: 26px;
    padding: 30px 30px 30px 0px;
    border-bottom: 1px solid #f1f1f1;
  }
  .content {
    margin-bottom: 30px;
    .item:nth-child(1) {
      .item-cover {
        .cover-label {
          background-position: 0px;
          color: #fff;
        }
      }
    }
     .item:nth-child(2) {
      .item-cover {
        .cover-label {
          background-position: -30px;
          color: #fff;
        }
      }
    }
     .item:nth-child(3) {
      .item-cover {
        .cover-label {
          background-position: -60px;
          color: #fff;
        }
      }
    }
    .item {
      display: flex;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f1f1;
      .item-cover {
        width: 144px;
        height: 193px;
        display: block;
        border-radius: 10px;
        background: url("/static/images/base/book.png") no-repeat;
        background-size: cover;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        position: relative;
        .cover-label {
          position: absolute;
          top: 0px;
          left: 0px;
          background: url("/static/images/rank/top-bg.png") no-repeat;
          height: 44px;
          width: 30px;
          font-size: 22px;
          line-height: 44px;
          color: #000;
          text-align: center;
          background-position: -90px;
        }
      }
      .item-center {
        margin-left: 30px;
        width: 430px;
        span {
          display: block;
        }
        .name {
          font-size: 18px;
          margin-top: 10px;
        }
        .author {
          font-size: 14px;
          margin-top: 5px;
          color: #a1a1a1;
        }
        .desc {
          margin-top: 5px;
          font-size: 14px;
          color: #868686;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 40px;
        }
        .time {
          margin-top: 5px;
          font-size: 12px;
          color: #c1c1c1;
        }
      }
      .item-right {
        //   margin-top: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        flex-direction: column;
        .el-button {
          // background-color: #15c798;
          line-height: 32px;
          width: 110px;
          font-size: 16px;
          padding: 0px 20px;
          border: 2px solid transparent;
          .el-button--primary:focus,
          .el-button--primary:hover {
            // background-color: #15c798;
          }
        }
        .el-button:first-child {
          background-color: #fff;
          // border-color: #15c798;
          // color: #15c798;
          .el-button--primary {
            // border-color: #15c798;
          }
        }
      }
    }
  }
}
</style>


